<template>
  <div>
    <el-form
      :inline="true"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="fromdata"
      label-width="90px"
      label-position="right"
    >
      <el-row
        class=""
        v-if="!carId"
      >
        <el-col :span="22">客户车辆列表</el-col>
      </el-row>
      <el-divider
        v-if="!carId"
        content-position="center"
      ></el-divider>
      <el-row v-if="!carId">
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @row-click="rowClick"
          :width="160"
        >
        </data-table>
      </el-row>
    </el-form>
    <el-form
      :inline="true"
      ref="lineForm"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="lineForm"
      label-width="90px"
      label-position="right"
    >
      <el-row class="">
        <el-col :span="22">车辆信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车牌号:">
            <div>{{ lineForm.licensePlateNumber }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="VIN码:">
            <div>{{ lineForm.vin }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型:">
            <div>{{ lineForm.carModelName }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车辆属性:">
            <div>{{ lineForm.carAttribute }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆颜色:">
            <div>{{ lineForm.carColor }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前里程:">
            <div>{{ lineForm.mileage }}</div>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发动机号:">
            <div>{{ lineForm.engineNumber }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册时间:">
            <div>{{ lineForm.drivingPermitDate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险公司:">
            <div>{{ lineForm.companyName }}</div>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="保险投保期:">
            <div>{{ lineForm.insureDate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险到期:">
            <div>{{ lineForm.insureExpireDate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年审到期:">
            <div>{{ lineForm.examinedDate }}</div>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="创建日期:">
            <div>{{ lineForm.createTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:">
            <div>{{ lineForm.remark }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { clientCarList, getClientCarById } from '@/api/after-sale/client/car'
import baseMixin from '@/mixins/base'

export default {
  name: 'carInfo',
  components: {},
  props: {
    fromdata: {
      type: Object,
      default: () => ({}),
    },
    carId: {
      type: Number,
    }
  },
  mixins: [
    baseMixin({
      findData: clientCarList,
      dataName: ['content', 'totalRecords'],
      format (res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data () {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text', width: '150px' },
        { name: '车牌号', value: 'licensePlateNumber', type: 'text', width: '100px' },
        { name: '品牌', value: 'carBrandName', type: 'text', width: '100px' },
        { name: '车系', value: 'carSeriesName', type: 'text', width: '100px' },
        { name: '年款', value: 'timeType', type: 'text', width: '100px' },
        { name: '车型', value: 'carModelName', type: 'text', width: '200px' },
        { name: '车色', value: 'carColor', type: 'text' },
        { name: '里程数', value: 'mileage', type: 'text' },
        { name: '保险公司', value: 'companyName', type: 'text', width: '200px' },
        { name: '保险到期', value: 'insureExpireDate', type: 'text', width: '140px' },
        { name: '备注', value: 'remark', type: 'text' }
      ],
      rules: [],
      lineForm: {},
    }
  },
  async created () {
    this.searchOptions.clientId = this.fromdata.id
    this.searchOptions.clientLike = this.fromdata.phone
    if (this.carId) {
      this.rowClick({ id: this.carId })
    }
  },
  methods: {
    changeType (item) {
      this.selectedTypeText = item.label;
    },
    //表格被单击
    rowClick (row) {
      getClientCarById(row.id).then(res => {
        let { data, success } = res;
        if (success) this.lineForm = data;
      })
    },
  },
  mounted () { },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
